<template>
	<view class="top-nav">
			<li class="item">
				<image class="img" src="@/static/images/index/doctor.png" mode="aspectFit"></image>
				<text class="text">看医生</text>
			</li>
			<li class="item">
				<image class="img" src="@/static/images/index/science.png" mode="aspectFit"></image>
				<text class="text">知识科普</text>
			</li>
			<li class="item">
				<image class="img" src="@/static/images/index/moment.png" mode="aspectFit"></image>
				<text class="text">发动态</text>
			</li>
			<li class="item">
				<image class="img" src="@/static/images/index/buy.png" mode="aspectFit"></image>
				<text class="text">觅粮</text>
			</li>
	</view>
</template>

<script>
</script>

<style>
	
	.top-nav {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-evenly;
		width: 100%;
		margin: 20px auto 0;
	}
	
	.top-nav .item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
		margin-bottom: 30px;
	}
	
	.top-nav .item:nth-child(3n) {
		margin-right: 0;
	}
	
	.top-nav .item .text {
		margin-top: 10px;
	}
	
	
	.top-nav .item .img {
		width: 50px;
		height: 50px;
		display: block;
	}
	
</style>